/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React,{useEffect,useState} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    Image,
    Button,
    StatusBar,
    NativeModules
} from 'react-native';
import RNFS from 'react-native-fs';


export default class Test extends React.Component{

   constructor(props) {
       super(props);
   }

    state={
        imageList:[]
    }

    componentDidMount(){
        this.scanImageDir()
    }

    scanImageDir = ()=>{
        RNFS.readdir(this.getImagePath()).then(res=>{
            console.log('read dir',res)
            if(res.length > 0){
                let list = []
                res.forEach(item=>{
                    let path = this.getImagePath() + '/' + item
                    list.push(path)
                })
                this.setState({
                    imageList:list
                })
            }

        })
    }

    clearImage = ()=>{
        RNFS.readDir(this.getImagePath()).then(res=>{
            console.log('read dir',res)
            if(res.length > 0){
                res.forEach(item=>{
                    let path = this.getImagePath() + '/' + item
                    RNFS.unlink(path).then(res1=>{
                        console.log(res1)
                    })
                })

            }

        })
    }

     getImagePath = ()=>{
        let path = RNFS.DocumentDirectoryPath + '/BGBT/image';
        RNFS.exists(path).then(isExit=>{
            if(isExit){
                // console.log('path 存在:' + path)
            }else{
                RNFS.mkdir(path).then(res=>{
                    this.getImagePath()
                });
            }
        })

        return path
    }

    render(){
        return (
            <View style={styles.container}>
                <ScrollView
                    style={{height:200}}
                    horizontal={true}
                >
                    {
                        this.state.imageList.map((item,index)=>{
                            return (
                                <Image
                                    key={index.toString()}
                                    source={{uri:item}}
                                    style={{width:200,height:200,marginRight:10}}
                                    resizeMode={'contain'}/>
                            )
                        })
                    }

                </ScrollView>
            </View>
        );
    }

};

const styles = StyleSheet.create({

    container:{
        flex:1,
    }
});


